<template>
  <view class="container">
    <!-- 滚动区域 -->
    <scroll-view 
      scroll-y 
      class="scroll-view"
      :style="{ height: scrollHeight + 'px' }"
    >
      <!-- 文字列表 -->
      <view 
        v-for="(item, index) in textList" 
        :key="index" 
        class="text-item"
        @click="copyText(item)"
      >
        <text class="text-content">{{ item }}</text>
        <text class="copy-tip">点击复制</text>
      </view>
      
      <!-- 空状态提示 -->
      <view v-if="textList.length === 0" class="empty-tips">
        <text>暂无数据</text>
      </view>
    </scroll-view>
    
    <!-- 复制成功提示 -->
    <text v-if="copiedText" class="copy-notice">已复制: {{ copiedText }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 示例文本数组
      textList: [
        "这是第一段需要复制的文本内容",
        "第二段文本，点击即可复制到剪贴板",
        "欢迎使用文本复制功能",
        "长按也可以复制文本内容",
        "复制成功后会有提示信息",
        "可以滚动查看所有文本项",
        "每段文本都可以独立复制",
        "微信小程序文本复制功能",
        "UniApp开发小程序实用功能",
        "这是一个文本复制示例"
      ],
      scrollHeight: 500, // 滚动区域高度
      copiedText: ""     // 最近复制的文本
    };
  },
  mounted() {
    // 动态计算滚动区域高度
    this.calcScrollHeight();
    
    // 监听窗口变化
    uni.onWindowResize(() => {
      this.calcScrollHeight();
    });
  },
  methods: {
    // 计算滚动区域高度
    calcScrollHeight() {
      const systemInfo = uni.getSystemInfoSync();
      this.scrollHeight = systemInfo.windowHeight - 50; // 减去底部提示高度
    },
    
    // 复制文本
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          this.copiedText = text;
          
          // 2秒后清除提示
          setTimeout(() => {
            this.copiedText = "";
          }, 2000);
          
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 1500
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 长按复制（可选）
    longCopy(text) {
      this.copyText(text);
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  box-sizing: border-box;
}

.scroll-view {
  width: 100%;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.text-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 20rpx;
  border-bottom: 1rpx solid #eee;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.text-item:active {
  background-color: #f0f8ff;
}

.text-content {
  flex: 1;
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
}

.copy-tip {
  font-size: 24rpx;
  color: #007AFF;
  margin-left: 20rpx;
  padding: 8rpx 15rpx;
  border: 1rpx solid #007AFF;
  border-radius: 30rpx;
}

.empty-tips {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 28rpx;
}

.copy-notice {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  right: 0;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 0 40rpx;
  font-size: 28rpx;
  animation: fadeInOut 2s;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(20px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}
</style>